<template>
  <div>
    <div class="vm-overlay"
         ref="vm-overlay"
         v-if="show"
         :hack="shouldShow"
         @click="overlayClicked"
         :style="overlayStyle">
    </div>
  </div>
</template>

<script>
const animation = weex.requireModule('animation')
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    },
    hasAnimation: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [Number, String],
      default: 200
    },
    timingFunction: {
      type: Array,
      default: () => (['ease-out', 'ease-in'])
    },
    opacity: {
      type: [Number, String],
      default: 0.6
    },
    canAutoClose: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    overlayStyle() {
      return {
        opacity: this.hasAnimation ? 0 : 1,
        backgroundColor: `rgba(0, 0, 0,${this.opacity})`
      }
    },
    shouldShow() {
      const { show, hasAnimation } = this
      hasAnimation && setTimeout(() => {
        this.appearOverlay(show)
      }, 10)
      return show
    }
  },
  methods: {
    overlayClicked(e) {
      this.canAutoClose ? this.appearOverlay(false) : this.$emit('overlayBodyClicked', {})
    },
    appearOverlay(bool, duration = this.duration) {
      const { hasAnimation, timingFunction, canAutoClose } = this
      const needEmit = !bool && canAutoClose
      needEmit && (this.$emit('overlayBodyClicking', {}))
      const overlayEl = this.$refs['vm-overlay']
      if (hasAnimation && overlayEl) {
        animation.transition(overlayEl, {
          styles: {
            opacity: bool ? 1 : 0
          },
          duration,
          timingFunction: timingFunction[bool ? 0 : 1],
          delay: 0
        }, () => {
          needEmit && (this.$emit('overlayBodyClicked', {}))
        })
      } else {
        needEmit && (this.$emit('overlayBodyClicked', {}))
      }
    }
  }
}
</script>

<style scoped>
.vm-overlay {
  width: 750px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
</style>
